<!-- 首页 -->
<template>
	<view class="page" v-if="my == 'true'">
		<u-navbar title="扩列详情"></u-navbar>
		<u-notice-bar mode="horizontal" :list="list"></u-notice-bar>
		<view class="page-box">
			
			<view class="info-box">
				<view class="column">
					<view class="image-box">
						<image class="image-logo" mode="aspectFill" :src="qun.qrcodeImage"></image>
						<view class="image-lock" v-if="qun.payCheck == '1'">需付费查看</view>
					</view>
					<view class="game-info-box">
						<view class="avatar-img-box">
							<image class="avatar-img" :class="qun.sex == '0' ? 'blue' : ''" :src="qun.avatar"></image>
							<view class="game-title">发布时间： {{qun.pubDate}}</view>
						</view>
						<view class="game-desc">{{qun.title}}</view>
						<view class="game-num">
							<view>付费{{qun.payNum}}</view>
							<!-- <view v-if="qun.sexCheck == '0'">限男生</view>
							<view v-if="qun.sexCheck == '1'">限女生</view>
							<view v-if="qun.sexCheck == '2'">男女不限</view> -->
							<view>喜欢{{qun.giveNum}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="card-box">
				<view class="card-title">
					<view class="title-text">付费人数({{qun.payNum}}/{{qun.maxNum}})</view>
					<!-- <view class="more-user" @click="telUser" v-if="info.userId == userId">
						<view class="more-tip">联系他们</view>
						<u-icon name="arrow-right" size="24"></u-icon>
					</view> -->
				</view>
				<view class="user-box">
					<view v-if="userList.length == 0">暂无数据</view>
					<view v-else class="user-avatar-box" v-for="(user, index) in userList" :key="index">
						<u-avatar size="90" :src="user.avatar" show-sex="true" :sex-icon="user.sex == '1' ? 'woman' : 'man'"></u-avatar>
					</view>
				</view>
			</view>
			
			<view class="card-box mb80">
				<view class="card-title">
					<view class="title-text">防骗指南</view>
				</view>
				<view class="game-content"> 
					<view>1.添加后如果是微信，可以点击转账(但是不要支付)，就能看到对方的真实姓名，大概区分是男是女。2.如果让加QQ的，基本上是骗子。3.以任何名义收费的，让请奶茶，给买东西的都是骗子，网恋奔现之前不要花钱，不敢开视频语音的都是骗子。4.建议下载反诈骗APP，如果被骗本平台概不承担责任！！！</view>
				</view>
			</view>
		</view>
		<view class="footer-box">
			<view class="share-btn" @click="shareBtn">
				<u-icon name="zhuanfa"></u-icon>
			</view>
			<view class="bm-btn" v-if="isPay" @click="pay">点击扫码添加</view>
			<view class="bm-btn" v-else @click="pay">支付查看（{{qun.payPrice}}趣豆）</view>
		</view>
		
		<user-auth></user-auth>
		<cash-popup></cash-popup>
		<coin-popup @close="shareBtn"></coin-popup>
	</view>
</template>

<script>
import {mapState} from 'vuex';
export default {
	data() {
		return {
			background: {
				backgroundColor: 'unset',
			},
			list: [
				'进群后如果要私加好友请自行斟酌',
				'注意分辨',
				'谨防上当受骗',
				'本小程序概不承担责任！！！',
			],
			id: 0,
			qun: {
				payNum: 0,
				maxNum: 0,
				payPrice: 0,
			},
			isPay: false,
			user: {},
			userId: 0,
			userList: [],
			title: '',
			border: false,
			form: {
				lon: '',
				lat: '',
			},
			sheetList: [],
			sheetShow: false,
			status: 'loadmore',
			scrollTop: 0,
			isEnd: false,
			current: 1,
			pageSize: 10,
			dataList: [],
			back: 'false',
			my: 'false',
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.my = option.my;
		var userId = uni.getStorageSync("userId");
		this.userId = userId;
		this.getDetail();
	},
	onShareAppMessage(res) {
		return {
			title: this.qun.title,
			path: '/pages/index?index=2&qun=true&shareUserId='+this.userId+'&id='+this.id,
			imageUrl: this.qun.image,
		};
	},
	onShareTimeline() {
		return {
			title: this.qun.title,
			path: '/pages/index?index=2&qun=true&shareUserId='+this.userId+'&id='+this.id,
			imageUrl: this.qun.image,
		};
	},
	methods: {
		getDetail() {
			this.$u.get('/wq/qun/getDetail',{
				id: this.id,
				userId: this.userId,
			}).then(res => {
				this.qun = res.qun;
				this.userList = res.qunUserList;
				this.isPay = res.isPay;
			});
		},
		telUser() {
			this.$u.route({
				url: 'pages/game/user',
				params: {
					id: this.id,
				}
			});
		},
		telNumber(e) {
			var phone = e.phonenumber;
			uni.makePhoneCall({
				 phoneNumber: phone,//仅为示例
				 success(res) {
					console.log("拨打电话成功",res)
				 },
				 fail(err) {
					console.log("拨打电话失败",'err')
				 }
			});
		},
		telphone() {
			this.$u.get('/wq/activity/getUser',{
				id: this.id,
			}).then(res => {
				var phone = res.user.phonenumber;
				uni.makePhoneCall({
					 phoneNumber: phone,//仅为示例
					 success(res) {
						console.log("拨打电话成功",res)
					 },
					 fail(err) {
						console.log("拨打电话失败",'err')
					 }
				});
			});
		},
		shareBtn() {
			this.$store.commit('setCash', true);
		},
		homeBtn() {
			uni.reLaunch({
			  url: '/pages/index?index=2'
			});
		},
		copyWechat() {
			this.$u.get('/wq/activity/getUser',{
				id: this.id,
			}).then(res => {
				var wechat = res.user.wechat;
				uni.setClipboardData({
				    data: wechat ,
				    success: function (res) {
						uni.showToast({
							 title: '复制微信成功',
						});
				    }
				});  
			});
		},
		reload() {
			this.query();
		},
		load() {
			this.loadmore();
		},
		menu(e) {
			this.sheetList = e;
			this.sheetShow = true;
		},
		clickSheet(sheet) {
			if('remove' == sheet.tag){
				this.deleteTopic(sheet.id);
			}
		},
		userCenter(item) {
			this.judgeLogin(() => {
				this.$u.route({
					url: 'packgeMine/pages/center/index',
					params: {
						userId: item.userId,
					}
				});
			});
		},
		pay() {
			this.judgeLogin(() => {
				this.$u.post('/wq/qun/join',{
					id: this.id,
				}).then(res => {
					uni.previewImage({
						current: 0, //预览图片的下标
						urls: res.img, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
						indicator: 'number',
						loop: true
					});
					this.getDetail();
				});
			});
		},
		handerChooseLocation () {
			var lat = this.info.lat;
			var lon = this.info.lon;
			uni.openLocation({
				latitude: Number(lat),
				longitude: Number(lon),
			});
		},
		deleteTopic(id) {
			this.$u.get('/wq/dynamic/delete',{
				id: id,
			}).then(res => {
				this.reload();
			})
		},
		async loadmore() {
			this.status = 'loading';
			if(this.isEnd){
				this.status = 'nomore';
				return;
			}
			var res = await this.getDataList();
			this.dataList = this.dataList.concat(res.rows);
		},
		query() {
			this.current = 1;
			this.isEnd = false;
			this.status = 'loadmore';
			this.loadquery();
		},
		async loadquery() {
			var res = await this.getDataList();
			this.dataList = res.rows;
		},
		async getDataList() {
			var res = await this.$u.get('/wq/dynamic/myList', {
				pageNum: this.current,
				pageSize: this.pageSize,
			});
			var totalPage = Math.ceil(res.total/this.pageSize);
			this.pages = totalPage;
			this.current ++;
			this.status = 'loadmore';
			if(this.current > this.pages){
				this.status = 'nomore';
				this.isEnd = true;
			}
			return res;
		},
		thumb(e,i) {
			this.$u.post('/wq/dynamicGive/add',{
				dynamicId: e.id,
			}).then(res => {
				if(res.data){
					this.dataList[i].giveNum = this.dataList[i].giveNum + 1;
				}else{
					this.dataList[i].giveNum = this.dataList[i].giveNum - 1;
				}
			});
		},
		chat(e) {
			this.$u.route({
				url: 'packgeMine/pages/index/dynamic',
				params: {
					dynamicId: e.id,
				}
			});
		},
		clickSheetBtn(index) {
			var sheet = this.sheetList[index];
			this.clickSheet(sheet);
		},
	}
};
</script>

<style>
	page {
		background-color: #faf1f1;
	}
</style>
<style lang="scss" scoped>
	.image-box-container {
		overflow: hidden;
	}
	.mian-box {
		position: absolute;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		flex-direction: column;
		padding: 15px;
		padding-top: 200rpx;
	}
	.avatar-box {
		padding: 6rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100%;
	}
	.navbar-box {
		position: absolute;
	}
	.dot {
		margin: 0 3px;
	}
	.nickname {
		font-size: 34rpx;
		color: #fff;
		margin: 5px 0;
		margin-bottom: 0;
		font-weight: bold;
	}
	.address-box {
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 24rpx;
		line-height: 25px;
	}
	.sign-box {
		font-size: 22rpx;
		margin: 10px 0;
		color: #fff;
	}
	.topic-header {
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.topic-title {
		font-size: 26rpx;
		font-weight: bolder;
	}
	.topic-more {
		font-size: 24rpx;
		color: #505152bd;
	}
	.loadmore-box {
		padding: 15px 0;
	}
	.page-box {
		width: 100%;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		padding-bottom: 50px;
	}
	.footer-box {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 30px;
		box-shadow:0 0 9px 3px #f4f4f5; 
		height: 60px;
	}
	.bm-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		background-color: #a569d9;
		padding: 10px 0;
		border-radius: 20px;
		margin-left: 30px;
		color: #fff;
	}
	.bm-btn-disabled {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		background-color: #ddd;
		padding: 10px 0;
		border-radius: 40px;
		margin-left: 15px;
		color: #fff;
	}
	.home-btn {
		background-color: #beabd0;
		width: 35px;
		height: 35px;
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
	.share-btn {
		background-color: #beabd0;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100%;
		color: #fff;
	}
	.info-box {
		padding: 15px;
		margin-bottom: 10px;
		background-color: #fff;
		margin-top: 10px;
	}
	.card-box {
		padding: 10px;
		margin-bottom: 10px;
		background-color: #fff;
	}
	.tag-box {
		display: flex;
	}
	.tag {
		background-color: #f7ce05;
		padding: 4rpx 20rpx;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		margin-right: 10px;
		color: #fff;
	}
	.nv {
		background-color: #fe709f;
		color: #fff;
	}
	.md {
		background-color: #a569d9;
	}
	.info-title {
		font-size: 32rpx;
		margin: 10px 0;
		margin-bottom: 5px;
	}
	.card-tip {
		font-size: 24rpx;
		margin-bottom: 10rpx;
	}
	.card-tips {
		font-size: 24rpx;
	}
	.card-tip-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	.map {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		right: 0;
		bottom: -5px;
	}
	.card-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.title-text {
		font-size: 28rpx;
		font-weight: bolder;
	}
	.more-user {
		display: flex;
		align-items: center;
	}
	.more-tip {
		margin-right: 10px;
		font-size: 24rpx;
		color: #f7ce05;
	}
	.user-box {
		display: flex;
		flex-wrap: wrap;
		padding: 10px 0;
		padding-bottom: 0;
	}
	.store-box {
		display: flex;
		flex-direction: column;
		padding: 10px 0;
		padding-bottom: 0;
	}
	.user-avatar-box {
		margin-right: 10px;
	}
	.game-content {
		padding: 10px 0;
		padding-bottom: 0;
	}
	.mb80 {
		margin-bottom: 70px;
	}
	.mb30 {
		margin-bottom: 15px;
	}
	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 100%;
		margin-right: 10rpx;
	}
	.player-box {
		padding-top: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.player-box-left {
		display: flex;
		align-items: center;
	}
	.id-card {
		display: flex;
		align-items: center;
		font-size: 20rpx;
	}
	.wx-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		margin-left: 15px;
	}
	.price-box {
		position: absolute;
		right: 30rpx;
	}
	.price-info {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.price-text {
		color: #fe709f;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bolder;
		font-size: 28rpx;
	}
	.eye-box {
		background-color: #505152bd;
		position: absolute;
		color: #fff;
		top: 160rpx;
		right: 10px;
		z-index: 9999;
		border-radius: 20px;
		padding: 4rpx 10rpx;
		font-size: 22rpx;
	}
	.btn-disabled {
		background-color: #ddd;
	}
	
	.masonry {
	    display: flex;
	    flex-direction: column;
		padding-top: 10px;
	}
	
	.column {
		display: flex;
		background-color: #fff;
		border-radius: 5px;
	}
	
	.image-logo {
		width: 180rpx;
		height: 180rpx;
		border-radius: 5px;
	}
	
	.game-info-box {
		display: flex;
		flex-direction: column;
		flex: 1;
		position: relative;
	}
	
	.game-title {
		color: #82848a;
		font-size: 24rpx;
	}
	.game-heart {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 100%;
	}
	.game-desc {
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; /* 这里是超出几行省略 */
		overflow: hidden;
		font-size: 28rpx;
		margin-top: 5px;
	}
	.eye-num {
		color: #606266;
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}
	
	.card-list-box {
		padding: 0 30rpx;
	}
	.avatar-box {
		margin-right: 30rpx;
		position: relative;
	}
	.sex-nv {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 100%;
		border: 4rpx solid #fff;
		background-color: #fe709f;
		font-size: 20rpx;
		color: #fff;
	}
	.sex-nan {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 100%;
		border: 4rpx solid #fff;
		background-color: #2b85e4;
		font-size: 20rpx;
		color: #fff;
	}
	.card-title {
		font-size: 30rpx;
		line-height: 70rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 320rpx;
	}
	.card-info {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.card-list {
		display: flex;
		align-items: center;
		padding: 30rpx 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		position: relative;
		margin-top: 10px;
	}
	.card-tag {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.card-tag .tag {
		background-color: #faf1f1;
		padding: 6rpx 12rpx;
		border-radius: 10rpx;
		margin-right: 10px;
		font-size: 22rpx;
		color: #606266;
	}
	.card-tag .tag-active {
		background-color: #faf1f1;
		padding: 6rpx 12rpx;
		border-radius: 10rpx;
		margin-right: 10px;
		font-size: 22rpx;
		color: #802ead;
	}
	.card-type {
		font-size: 22rpx;
		background-color: #dd0690;
		color: #fff;
		padding: 6rpx 24rpx;
		border-radius: 10rpx;
		position: absolute;
		top: 0;
		left: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: 0;
	}
	.card-coin {
		font-size: 22rpx;
		background-color: #c9be7d;
		color: #fff;
		padding: 6rpx 24rpx;
		border-radius: 10rpx;
		position: absolute;
		top: 0;
		left: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: 0;
	}
	.card-status {
		font-size: 20rpx;
		background-color: #faf1f1;
		padding: 12rpx 24rpx;
		border-radius: 50px;
		position: absolute;
		top: 10px;
		right: 20px;
		color: #606266;
		display: flex;
		line-height: 20rpx;
	}
	.card-tip {
		font-size: 24rpx;
		color: #606266;
		line-height: 40rpx;
	}
	.card-tip-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.msg-box {
		font-size: 28rpx;
		color: #b5b5b5;
		min-height: 20rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 100px;
	}
	.loadmore-box{
		padding: 15px;
		padding-bottom: 150rpx;
	}
	.play-box {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 30rpx;
	}
	.play-btn {
		background-color: #eb92cd1a;
		padding: 20rpx 30rpx;
		border-radius: 20px;
		color: #a569d9;
		font-weight: bold;
		font-size: 28rpx;
	}
	.game-num {
		font-size: 24rpx;
		margin-top: 5px;
		color: #82848a;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 100%;
	}
	.image-box {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
	}
	.image-lock {
		position: absolute;
		background-color: red;
		padding: 3px 6px;
		color: #fff;
		font-size: 24rpx;
	}
	.avatar-img {
		width: 20px;
		height: 20px;
		border-radius: 100%;;
		margin-right: 5px;
		border: 1px solid #fe709f;
	}
	.avatar-img-box {
		display: flex;
		align-items: center;
	}
	.blue {
		border: 1px solid #2b85e4;
	}
	@keyframes btnScaleAni {
	  0%{ transform: scale(.85); opacity: .6; }
	  50%{ transform: scale(1); opacity: 1; }
	  100%{ transform: scale(.85); opacity: .6; }
	}
</style>
